<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>前端使用ajax给后端发送form表单数据</div>
    <div>enctype为数据编码格式，如果需要上传文件<div>
    <div>则需要使用multipart/form-data编码格式</div>
    </div>
    <form action="/form" id="form" method="POST" enctype="multipart/form-data">
      <input type="text" name="name" />
      <input type="password" name="password" />
      <input type="file" name="file" />
      <input type="submit" />
    </form>
    <script>
      var form = document.getElementById("form");
      form.addEventListener("submit", function (e) {
        e.preventDefault()
        let formData = new FormData(form)
        fetch('/form',{
            method: 'POST',
            body: formData
            // 这时不需要传入content-type，fetch会自动根据body里的数据进行配置
        })
      });
    </script>
  </body>
</html>
